<!--
缴费名单详情
-->
<template>
  <div class="app-container">
    <el-card class="info-card">
      <UfInfo v-model="listId"></UfInfo>
    </el-card>
    <el-card class="info-card">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="缴费项目" name="first">
          <pay-item v-model="listId"></pay-item>
        </el-tab-pane>
        <el-tab-pane label="账单信息" name="second">
          <bill v-model="listId"></bill>
        </el-tab-pane>
      </el-tabs>
    </el-card>


  </div>
</template>

<script>


import PayItem from "@/views/uniquefees/payStuItem/payItem/index.vue";
import Bill from "@/views/uniquefees/payStuItem/bill/index.vue";
import UfInfo from "@/views/uniquefees/payStuItem/info/index.vue";

export default {
  props: {
    value: [String, Object, Array]
  },
  name: "PaymentInfo",
  components: {UfInfo, Bill, PayItem},
  data() {
    return {
      listId: '1715410432608',
      activeName: 'first'
    };
  },
  created() {
    this.listId = (this.$route.params && this.$route.params.id) || this.listId
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
;
</script>

<style>
.info-card {
  margin-bottom: 20px;
  border-radius: 30px;
}
</style>
